<template>
  <view class="login-page">
    <image class="login-icon" src="../../static/shudong.png" />
    <view class="input-container">
      <input type="text" v-model="username" placeholder="请输入用户名" style="border: 1px solid #ccc; border-bottom: 2px solid #000;" />
      <input type="password" v-model="password" placeholder="请输入密码" style="border: 1px solid #ccc; border-bottom: 2px solid #000;" />
    </view>
    <view class="action-container">
      <button @click="login">登录</button>
      <view style="white-space: pre-line;">
        <text style="font-size: 12px;" @click="register">如未注册,先注册</text><br>
       
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
    // 登录逻辑，与后端交互
    this.$request({
        // 替换为实际的登录接口地址
        url: '/users/login', // 后端接收评论的接口地址
        method: 'POST',
        data: {
            "username": this.username,
            "password": this.password
        },
    }).then(res => {
        console.log('Login response:', res); // 添加日志输出
		console.log(res.code);
        if (res.code === 200) {
            const token = res.data.token;
            uni.setStorage({
                key: 'token',
                data: token
            });
            uni.switchTab({
                url: '/pages/my/my'
            });
        } else {
            uni.showToast({
                title: '登录失败，请检查用户名和密码',
                icon: 'none'
            });
        }
    });
    },
    register() {
      // 注册逻辑，跳转到注册页面
      uni.navigateTo({
        url: '/pages/register/register'
      });
    },
   
  }
};
</script>

<style>
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.login-icon {
  width: 100px;
  height: 100px;
}

.input-container {
  width: 80%;
  margin-top: 20px;
}

.action-container {
  width: 80%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

input {
  width: 100%;
  padding: 10px;
}

button {
  width: 48%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
</style>